/* pages/mine/mine.wxss */
/* pages/myCars/myCars.wxss */
@import "/style/common.wxss";

.mine-page {
  .banner-box {
    width: 100%;
    position: relative;

    &>image {
      width: 100%;

    }

    .box {
      width: 80%;
      height: 420rpx;
      position: absolute;
      bottom: -100rpx;
      border-radius: 30rpx;
      // bottom: 50rpx;
      left: 50%;
      transform: translate(-50%, 0);
      background: linear-gradient(99.07deg, rgb(245, 226, 253) -15.63%, rgba(121, 87, 255, 0.9) 98.02%, rgba(192, 153, 255, 1) 106.98%);

      &>image {
        display: block;
        width: 100%;
        height: 420rpx;
        position: absolute;
        z-index: 999;
        left: 0;
        top: 0;
      }

      .data-box {
        width: 100%;
        height: 280rpx;
        position: absolute;
        z-index: 1;
        left: 0;
        top: 0;
        padding: 35rpx 0;

        .one {
          width: 80%;
          margin: 0 auto;
          display: flex;
          justify-content:space-evenly;
          align-items: center;
          border-bottom: 1rpx solid whitesmoke;

          &>image {
            display: block;
            width: 80rpx;
            height: 80rpx;
          }
        }

        .driverIdCard_ {
          width: 80%;
          margin: 0 auto;
          border-bottom: 1rpx solid whitesmoke;
          display: flex;
          padding: 5rpx 40rpx 10rpx 20rpx;
        }


        &>view {
          width: 34%;
          float: left;
          color: white;
          margin-bottom: 30rpx;

          &:nth-of-type(1) {
            width: 100%;
            height: 130rpx;
          }

          &:nth-of-type(3n-1) {
            width: 32%;
          }

          &>view {
            text-align: center;

            &:first-of-type {
              font-size: 28rpx;
            }

            &:last-of-type {
              font-size: 30rpx;
              margin-top: 10rpx;
            }
          }
        }
      }
    }
  }

  .charts-box {
    width: 100%;
    // height: 40vh;
    // border: 1rpx solid red;
    margin-top: 190rpx;
    padding: 0 50rpx;

    .tab-box {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 40rpx;

      &>view {
        margin-left: 50rpx;
        color: #999999;

        &.active {
          color: #000000;
          font-size: 34rpx;
        }
      }
    }

    #lineCanvas {
      width: 100%;
      height: 40vh;
      // border: 1rpx solid blue;
    }
  }

  .btn {
    position: fixed;
    width: 80%;
    background: #CCCCCC;
    left: 50%;
    bottom: 50rpx;
    transform: translateX(-50%);
    text-align: center;
    color: white;
    font-size: 32rpx;
    line-height: 80rpx;
    border-radius: 80rpx;
  }
}